上级|上文_Flutter中的InheritedWidgetInheritedModel

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Flutter中的InheritedWidgetInheritedModel相关的知识，希望对你有一定的参考价值。

Flutter中有四种widget

StatelessWidget
StatefullWidget
RenderObjectWidget
InheritedWidget

其中StatelessWidget和StatefulWidget是最常见到的&＃xff0c;从状态管理角度的分类。RenderObjectWidget是所有需要渲染的Widget的基类。

至于最后一个InheritedWidget&＃xff0c;许多初学者不一定了解&＃xff0c;但是在一些稍微复杂的项目中是必须要用到的&＃xff0c;所以本文介绍一下InheritedWidget的用法

InheritedWidget

To obtain the nearest instance of a particular type of inherited widget from a build context, use BuildContext.inheritFromWidgetOfExactType.
Inherited widgets, when referenced in this way, will cause the consumer to rebuild when the inherited widget itself changes state.

通常情况下&＃xff0c;子widget无法单独感知父widget的变化&＃xff0c;当父state变化时&＃xff0c;通过其build重建所有子widget&＃xff1b;

InheritedWidget可以避免这种全局创建&＃xff0c;实现局部的子widget更新&＃xff1a;
子widget通过BuildContext.inheritFromWidgetOfExactType从buildContext中获取并监听指定类型的父InheritedWidget&＃xff0c;并跟随其重建而rebuild

如上图&＃xff0c;点击C按钮&＃xff0c;State变化后&＃xff0c;A的Text可以单独刷新&＃xff0c;B不受到影响

代码演示

接下来通过代码对比一下使用或不使用InheritedWidget的区别&＃xff1a;

 点击&＃43;&＃xff0c;后上面的0变化&＃xff0c;中间的文字部分不变化。

传统实现

点击按钮state变化后&＃xff0c;widgetA、B、C都会rebuild

class TopPage extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text(&＃39;Demo&＃39;),
),
body: HomePage(),
),
);

class HomePage extends StatefulWidget
&＃64;override
_HomePageState createState() &＃61;> _HomePageState();
class _HomePageState extends State
int _counter &＃61; 0;
void _incrementCounter()
setState(()
_counter&＃43;&＃43;;
);

&＃64;override
Widget build(BuildContext context)
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
WidgetA(_counter),
WidgetB(),
WidgetC(_incrementCounter),
],
),
);

class WidgetA extends StatelessWidget
final int counter;
WidgetA(this.counter);
&＃64;override
Widget build(BuildContext context)
return Center(
child: Text(
&＃39;$counter&＃39;,
style: Theme.of(context).textTheme.display1,
),
);

class WidgetB extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
return Text(&＃39;I am a widget that will not be rebuilt.&＃39;);

class WidgetC extends StatelessWidget
final void Function() incrementCounter;
WidgetC(this.incrementCounter);
&＃64;override
Widget build(BuildContext context)
return RaisedButton(
onPressed: ()
incrementCounter();
,
child: Icon(Icons.add),
);



使用androidStudio的Flutter Performance可以看到widgetA、B、C都参与了rebuild

使用InheritedWidget实现

class TopPage extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(
child: Scaffold(
appBar: AppBar(
title: Text(&＃39;InheritedWidget Demo&＃39;),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
WidgetA(),
WidgetB(),
WidgetC(),
],
),
),
),
);

class _MyInheritedWidget extends InheritedWidget
_MyInheritedWidget(
Key key,
&＃64;required Widget child,
&＃64;required this.data,
) : super(key: key, child: child);
final HomePageState data;
&＃64;override
bool updateShouldNotify(_MyInheritedWidget oldWidget)
return true;

class HomePage extends StatefulWidget
HomePage(
Key key,
this.child,
) : super(key: key);
final Widget child;
&＃64;override
HomePageState createState() &＃61;> HomePageState();
static HomePageState of(BuildContext context, bool rebuild &＃61; true)
if (rebuild)
return (context.inheritFromWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;

return (context.ancestorWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;
// or
// return (context.ancestorInheritedElementForWidgetOfExactType(_MyInheritedWidget).widget as _MyInheritedWidget).data;

class HomePageState extends State
int counter &＃61; 0;
void _incrementCounter()
setState(()
counter&＃43;&＃43;;
);

&＃64;override
Widget build(BuildContext context)
return _MyInheritedWidget(
data: this,
child: widget.child,
);

class WidgetA extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
final HomePageState state &＃61; HomePage.of(context);
return Center(
child: Text(
&＃39;$state.counter&＃39;,
style: Theme.of(context).textTheme.display1,
),
);

class WidgetB extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
return Text(&＃39;I am a widget that will not be rebuilt.&＃39;);

class WidgetC extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
final HomePageState state &＃61; HomePage.of(context, rebuild: false);
return RaisedButton(
onPressed: ()
state._incrementCounter();
,
child: Icon(Icons.add),
);



 可以看到state变化时&＃xff0c;widgetB、C都没有rebuild

关键代码说明

针对InheritedWidget版本中的关键类进行说明

WidgetA、WidgetC

传统版本中WidgetA、C通过构造函数传入父级的state以及回调
InheritedWidget版本中&＃xff0c;可以通过如下静态方法获取

final HomePageState state &＃61; HomePage.of(context); // WidgetA
final HomePageState state &＃61; HomePage.of(context, rebuild: false);  // WidgetC

WidgetC是一个Button需要通过state获取回调方法&＃xff0c;但不需要跟随state变化而刷新&＃xff0c;所以rebuild指定false

接下来详细看一下获取state的静态方法 HomePage.of

HomePage

static HomePageState of(BuildContext context, bool rebuild &＃61; true)
if (rebuild)
return (context.inheritFromWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;

return (context.ancestorWidgetOfExactType(_MyInheritedWidget) as _MyInheritedWidget).data;
// or
// return (context.ancestorInheritedElementForWidgetOfExactType(_MyInheritedWidget).widget as _MyInheritedWidget).data;



HomePage.of用来通过buildContext&＃xff0c;找到最近的_MyInheritedWidget。然后就可以同_MyInheritedWidget获取其持有的state。

获取上级Widget的几个关键方法如下&＃xff1a;

因此&＃xff0c;widgetA随着父widget的变化而rebuild&＃xff0c;widgetB并没有rebuild

class _MyInheritedWidget extends InheritedWidget
_MyInheritedWidget(
Key key,
&＃64;required Widget child,
&＃64;required this.data,
) : super(key: key, child: child);
final HomePageState data;
&＃64;override
bool updateShouldNotify(_MyInheritedWidget oldWidget)
return true;



继承自InheritedWidget&＃xff0c;所以子Widget可以通过inheritFromWidgetOfExactType获取。

updateShouldNotify控制是否需要子widget感受其变化&＃xff0c;如果返回true&＃xff0c;则通过inheritFromWidgetOfExactType注册的子widget跟随其变化rebuild

子widget最终目的是要获取共享的父级state&＃xff0c;所以这里通过data属性持有了state。

那再来看一下这个HomePageState

HomePageState

&＃64;override
Widget build(BuildContext context)
return _MyInheritedWidget(
data: this,
child: widget.child,
);



此处_MyInheritedWidget的使用是关键。

传统写法中&＃xff0c;build中直接创建widgetA、B、C并返回&＃xff0c;因此每当state变化时&＃xff0c;会重新创建子widget并rebuild&＃xff1b;

InheritedWidget版本中&＃xff0c;HomePage保持父widget&＃xff08;TopPage&＃xff09;的children&＃xff0c;当state变化时widgetA、B、C不会重建&＃xff0c;而是重新传入给_MyInheritedWidget&＃xff0c;重建的只有_MyInheritedWidget

TopPage

class TopPage extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
・・・
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [　
WidgetA(), // 子widget的创建移动到这里
WidgetB(),
WidgetC(),
],
),
・・・



根据上文的说明&＃xff0c;为了避免子widget的反复创建和rebuild&＃xff0c;将widgetA、B、C的实例化移动到这里
InheritedModel

上面的例子中我们通过自定义了rebuild参数来指定子Widget是否参与rebuild&＃xff0c;实际上也可以使用InheritedModel完成此需求

InheritedModel继承自InheritedWidget&＃xff0c;可以通过字符串key&＃xff08;aspect&＃xff09;来指定特定子widget进行rebuild。

简单看一下InheritedModel版本与InheritedWidget版本在实现上的不同

&＃64;override
HomePageState createState() &＃61;> HomePageState();
static HomePageState of(BuildContext context, String aspect)
return InheritedModel.inheritFrom<_MyInheritedWidget>(context, aspect: aspect).data;




使用 InheritedModel.inheritFrom获取widget

class _MyInheritedWidget extends InheritedModel
&＃64;override
bool updateShouldNotifyDependent(_MyInheritedWidget old, Set aspects)
return aspects.contains(&＃39;A&＃39;); // 当aspect包晗“A”时&＃xff0c;通知其rebuild




继承InheritedModel&＃xff0c;重写updateShouldNotifyDependent

class WidgetA extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
final HomePageState state &＃61; HomePage.of(context, &＃39;A&＃39;); // 注册aspect为“A“
class WidgetC extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
final HomePageState state &＃61; HomePage.of(context, &＃39;C&＃39;); // 注册aspect为“C”


如上&＃xff0c;因为注册的key(aspect)不同&＃xff0c;只有widgetA会受到rebuild的通知

更局部的刷新

如果widgetA是下面这样&＃xff0c;我们希望能进一步控制其子widget的局部刷新

class WidgetA extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
final HomePageState state &＃61; HomePage.of(context);
return Column(
children: [
Center(
child: Text(
&＃39;$state.counter&＃39;,
style: Theme.of(context).textTheme.display1,
),
),
Text("AAAAA"), // 此处不需rebuild
],
);



如果彻底理解了BuildContext和InheritedWidget的注册机制&＃xff0c;是可以很容易实现的&＃xff1a;

return Column(
children: [
Center(
child: Builder(builder: (context)
final HomePageState state &＃61; HomePage.of(context);
return Text(
&＃39;$state.counter&＃39;,
style: Theme.of(context).textTheme.display1,
);
),
),
Text("AAAAA"),
],
);


通过Builder来创建一个匿名类widget&＃xff0c;然后将HomePage.of移到其内部。此时InheritedWidget中注册的context不再是widgetA而是这个匿名类widget&＃xff0c;因此可以实现widgetA的局部刷新

不使用InheritedWidget

我想通过上文的介绍大家应该能够想到&＃xff0c;如果子widget仅仅想访问父级state&＃xff08;不通过构造函数传参的方式&＃xff09;&＃xff0c;但没有监听其变化的需要&＃xff0c;可以不使用InheritedWidget&＃xff1a;

class TopPage extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text(&＃39;Demo&＃39;),
),
body: HomePage(),
),
);

class HomePage extends StatefulWidget
HomePageState state; // 持有state供子类获取
&＃64;override
HomePageState createState()
state &＃61; HomePageState();
return state;

class HomePageState extends State
int counter &＃61; 0; // 去掉private
void incrementCounter() // 去掉private
setState(()
counter&＃43;&＃43;;
);

&＃64;override
Widget build(BuildContext context)
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
WidgetA(),
WidgetB(),
WidgetC(),
],
),
);

class WidgetA extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
final HomePage widget &＃61; context.ancestorWidgetOfExactType(HomePage); // 获取state
final HomePageState state &＃61; widget?.state;
return Center(
child: Text(
&＃39;$state &＃61;&＃61; null ? 0 : state.counter&＃39;,
style: Theme.of(context).textTheme.display1,
),
);

class WidgetB extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
return Text(&＃39;I am a widget that will not be rebuilt.&＃39;);

class WidgetC extends StatelessWidget
&＃64;override
Widget build(BuildContext context)
final HomePage widget &＃61; context.ancestorWidgetOfExactType(HomePage);
final HomePageState state &＃61; widget?.state;
return RaisedButton(
onPressed: ()
state?.incrementCounter();
,
child: Icon(Icons.add),
);



通过ancestorWidgetOfExactType寻找指定类型的widget&＃xff0c;然后获取其state使用&＃xff0c;当然这个遍历是O(n)的&＃xff0c;性能比InheritedWidget版本要差

最后

Flutter中很多组件都是基于InheritedWidget实现的&＃xff0c;例如Scoped Model、BLoC(Business Logic of component)等&＃xff0c;想要掌握这些高级特性的使用先从了解InheritedWidget开始吧

代码&＃xff1a;
https://github.com/vitaviva/flutter_inherited_widget_sample/tree/master/flutter_inherited_widgethttps://github.com/vitaviva/flutter_inherited_widget_sample/tree/master/flutter_inherited_widget